6.

Bekerja dengan Gambar

Gambar memegang peranan dalam pembuatan user interface, presentasi,

katalog produk dsb. Ada beberapa tipe file gambar yang bisa digunakan
dalam halaman web, antara lain JPEG, GIF dan PNG.

GIF Menampilkan maksimal 256 warna. Cocok

dipakai dalam botton, ikon, logo. Kelebihanya
Graphic Interchange
dari JPEG adalah mampu membuat gambar
Format
transparan dan animasi maupun interlaced.

JPEG Format ini dapat menampilkan jutaan warna.

Cenderung mempunyai ukuran yang lebih besar
Joint Photographic
dari pada GIF dan PNG. Tipe ini bisa
Experts Group
menampilkan gambar sedikit demi sedikit dari
atas ke bawah.

PNG Tipe ini memiliki kemampuan indexed-color,

grayscale, gambar dengan warna nyata dan
Portable Network Group
transparansi.

6.1 Memasukkan Gambar

Sebelum memasukkan gambar ke dalam halaman web anda. Anda harus
membiasakan untuk menyimpan file kedalam folder web. Ini dilakukan untuk
mencegah munculnya File://... Sehingga dapat menyebabkan gambar tidak
ditampilkan sewaktu dijalankan pada browser secara online.

Gambar 6.1 Tampilan konfirmasi penyalinan gambar

1
Beberapa Langkah memasukkan gambar :

1. Pada kategori Common di Insert bar, klik pada ikon image , atau
geser ikon image ke document window.
2. Pilih menu Insert > Image
3. Geser sebuah gambar ke dalam lembar kerja anda, sehingga anda akan
ditanya tentang penyalinan file. Klik OK jika anda jadi memilihnya.

6.2 Mengatur Properti Gambar

Setelah image terpasang, akan terlihat Properti Insperctor.

Gambar 6.2 Properti sebuah gambar

Mengatur Jarak Gambar

Mengatur jarak gambar dengan teks sekitarnya. Ini penting dalam sebuah
desain. Anda dapat memasukkan nilai ke dalam kotak teks V Space dan H
Space.

Gambar 6.3 Properti untuk mengatur jarak spasi gambar

6.3 Membuat Link Pada Gambar

Membuat link pada gambar tidaklah sulit, sama seperti pembuatan link pada
teks. Kita tinggal menghubungkan gambar dengan alamat halaman atau situs.

Langkah-langkahnya adalah :

2
1. Sisipkan sebuah gambar ke dalam document window.
2. Jika sudah terpilih, lakukan salah satu perintah ini :
• Pilih Modify > Make Link, tentukan alamat yang dituju kemudian OK
• Isikan alamat halaman pada properti Link di bagian Property Inspector
3. Tentukan Target pada kotak target.

Membuat Image Map

Image Map adalah gambar yang memiliki beberapa daerah tertentu, pada
daerah tersebut dapat diberi link. Fasilitas yang diberikan untuk membuat
image map ada tiga, adalah :
• (Rectangular Hotspot Tool) ,membuat daerah link berbentuk kotak.
• (Oval Hotspot Tool) , membuat link dengan bentuk oval/lingkaran
• (Polygon Hotspot Tool) , membuat link berbentuk poligon/bebas.

Gambar 6.4 Contoh pemakaian Image Map